<extend name="Base:main" />
<block name="title">
<title>蔬菜外卖 - 添加订单</title>
</block>
<block name="main-content">
<div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-user"></i>添加订单
				</h2>

				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round btn-default">
					 	<i class="glyphicon glyphicon-chevron-up"></i>
					 </a> 
					 <a href="#" class="btn btn-close btn-round btn-default">
					 	<i class="glyphicon glyphicon-remove"></i>
					 </a>
				</div>
			</div>
			<div class="box-content">
				<div class="alert alert-info">让接单员下订单</div>
				<form class="form-horizontal style-form" method="post" id="add_form">
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">用户：</label>
						<div class="col-sm-10">
							<select id="uid" name="uid" class="form-control" data-rel="chosen"
								onchange="selectUser();">
								<foreach name="users" item="user">
								<option value="{$user.id}">{$user.account}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">区域：</label>
						<div class="col-sm-10">
							<select id="area" name="area" class="form-control">
								<foreach name="areas" item="area">
								<option value="{$area.area_name}">{$area.area_name}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">地址：</label>
						<div class="col-sm-10">
							<input type="text" name="address" id="address"
								class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">联系人姓名：</label>
						<div class="col-sm-10">
							<input type="text" name="name" id="name" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">联系人电话：</label>
						<div class="col-sm-10">
							<input type="tel" name="phone" id="phone" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">支付方式：</label>
						<div class="col-sm-10">
							<select class="form-control" name="payment">
								<option value="2">货到付款</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">配送时间：</label>
						<div class="col-sm-10">
							<select class="form-control" name="ptime">
								<foreach name="ptimes" item="ptime">
									<option value="{$ptime}">{$ptime}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div id="foods"></div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">菜品：</label>
						<div class="col-sm-4">
							<select id="sfood" data-placeholder="请选择菜品" class="form-control" data-rel="chosen">
								<option value=""></option>
								<foreach name="foods" item="food">
									<option value="{$food.id}">{$food.food_name}</option>
								</foreach>
							</select>
						</div>
						<label class="col-sm-1 control-label">规格：</label>
						<div class="col-sm-3">
							<select id="scategory" data-placeholder="请选择菜品" class="form-control">
							
							</select>
						</div>
						<div class="col-sm-2">
							<button class="btn  btn-default" type="button" id="add">添加菜品</button>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">备注：</label>
						<div class="col-sm-10">
							<input type="text" name="remark" id="remark" class="form-control" placeholder="若无则可不填"/>
						</div>
					</div>
					<div style="text-align: center;">
						<button id="save" style="margin-right: 50px;"
							type="button" class="btn  btn-success">添加订单</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</block>
<block name="js-content"> <script type="text/javascript">
	var addFood = "__APP__/Admin/Food/addFood";
	var getCategory = "__APP__/Admin/Food/getFoodCategory";
	var users = <php><literal>echo json_encode($users);</literal></php>;
	var foods = <php><literal>echo json_encode($foods);</literal></php>;
	var categorys;
	function selectUser() {
		var user = users[$("#uid")[0].selectedIndex];
		$("#area").val(user['area']);
		$("#address").val(user['address']);
		$("#phone").val(user['phone_number']);
		$("#name").val(user['name']);
	}
	function deleteFood(id){
		$("#food_"+id).remove();
	}
	$("#add_form").on("click","button#save",function(e){
		if($("#foods").html() == ""){
			alert("请至少添加一个菜品");
			return;
		}
		var action="__APP__/Admin/Order/index";
		$("#add_form").attr('action',action);
		$("#add_form").submit();
	});
	$("#sfood").on('change',function(e){
		var id = this.value;
		$.post(getCategory,{fid:id},function(data){
			$("#scategory").html("");
			categorys = data;
// 			console.log(data);
			var count = data.length;
			for(var i =0;i<count;i++){
				var item = data[i];
				$("#scategory").append('<option value="'+i+'">'+item.title+'</option>');
			}
		});
// 		console.log(this.value);
	});
	$(function() {
		selectUser();
		$("#add").click(function() {
			var val = $("#sfood").val();
			var text = $("#sfood").find("option:selected").text();
			var index = $("#sfood").find("option:selected")[0].index;
			if(!index){
				alert('请选择菜品');
				return;
			}
			var item = categorys[$("#scategory").val()];
			var food = foods[index-1];
			//console.log($("#sfood").find("option:selected")[0].index);
			//console.log(val);
			//console.log(text);
			$food = $('<div class="form-group" id="food_'+val+'">\
					<input type="hidden" name="category[]" value="'+item['id']+'"><label\
					class="col-sm-2 col-sm-2 control-label">菜品：</label>\
				<div class="col-sm-3">\
					<input type="text" class="form-control" value="'+text+"("+item['title']+')" disabled />\
				</div>\
				<label class="col-sm-2 control-label">数量：</label>\
				<div class="col-sm-3">\
					<div class="input-group col-sm-10">\
						<input type="number" name="num[]" class="form-control" value="1"/>\
						<span class="input-group-addon">￥'+item['price']+"/"+item['unit']+'</span>\
					</div>\
				</div>\
				<div class="col-sm-1">\
					<button class="btn  btn-default" type="button" onclick="deleteFood('+val+')">删除菜品</button>\
				</div>\
			</div>');
			$("#foods").append($food);
		});
	})
</script> </block>